import React from 'react'
import { View, Textarea } from '@tarojs/components'
import { useDidShow, useRouter } from '@tarojs/taro'
import { Observer, useLocalStore } from 'mobx-react'
import { Rate } from '@/components/Rate'
import { Divider } from '@/components/Divider'
import { ButtonEle, ButtonType } from '@/components/Buttton'
import { RateModel } from '@/model/RateModel'

import './index.scss'

export default () => {


    const store = useLocalStore(() => RateModel)
    const { order_id } = useRouter().params;
    useDidShow(() => {
        store.setValue('order_id', order_id);
    })

    return (
        <Observer>
            {
                () =>
                    <View className="xxm-uc-rate">
                        <View className="xxm-uc-rate__header">
                            <View className="xxm-uc-rate__title">
                                感谢您的评价
                            </View>

                            <View className="xxm-uc-rate__desc">
                                您的评价和建议是我们提升服务的源泉
                            </View>
                            <Divider hairline>服务评星</Divider>
                            <View className="xxm-uc-rate__rate">
                                <Rate
                                    value={store.grade}
                                    onClick={(v) => {
                                        store.setValue('grade', v)
                                    }} />
                                <View className='xxm-uc-rate__text'>
                                    {store.rateList[store.grade - 1]}
                                </View>
                            </View>
                        </View>
                        <View className="xxm-uc-rate__content">
                            <Textarea
                                className="xxm-uc-rate__txt"
                                placeholder="请输入详细评价"
                                placeholderStyle="font-size: 14px"
                                value={store.content}
                                onInput={(e) => store.setValue('content', e.detail.value)}
                            ></Textarea>
                            <ButtonEle
                                type={ButtonType.PRI}
                                block
                                onClick={() => store.creteRate()}
                            >
                                提交评价
                            </ButtonEle>
                        </View>
                        <View className="xxm-uc-rate__footer">
                        </View>
                    </View>
            }
        </Observer>
    )
}